<template>
    <v-data-table-server :key="wordBo.bookId" :hover="true" :fixed-header="true" :loading="listLoading"
        :headers="headers" :items="wordList" :height="tableHeight" item-value="wordId" show-select
        v-model:items-per-page="wordBo.pageSize" :items-length="total" @update:options="loadItems"
        items-per-page-text="每页数据量" :items-per-page-options="[10, 20, 30, 40, 50, 100]">
        <template v-slot:item.actions="{ item }">
            <v-icon v-hasPermi="['read-word-admin']" class="me-2" icon="mdi-eye-outline"
                @click="viewWordDetail(item.data)"></v-icon>
            <v-icon v-hasPermi="['update-word-admin']" class="me-2" icon="mdi-pencil-outline"
                @click="updateWordDialog(item.data)"></v-icon>
            <v-icon v-hasPermi="['update-word-admin']" class="me-2" icon="mdi-delete-outline"
                @click="deleteWordDelete(item.data)"></v-icon>
        </template>
        <template v-slot:item.pronunciations="{ item }">
            <PronunciationComponent direction="vertical" :pronunciationProps="item.data.pronunciation" />
        </template>
    </v-data-table-server>
    <v-dialog v-model="commonDialogConfig.visible" persistent :width="commonDialogConfig.width">
        <v-card :prepend-icon="commonDialogConfig.prependIcon" :title="commonDialogConfig.title">
            <v-card-text>
                <DIYWordComponent :labelList="labelList" :langList="langList" ref="diyWordComponent"
                    :bookList="bookList" v-if="commonDialogConfig.name == 'save' || commonDialogConfig.name == 'update'"
                    :mode="commonDialogConfig.name" />
                <AdminWordDetailComponent v-else-if="commonDialogConfig.name == 'word-detail'"
                    ref="adminWordDetailComponent" />
                <div v-else-if="commonDialogConfig.name == 'delete'">
                    <p>确认从字典中移除
                        <strong style="color:#2196F3">{{ commonDialogConfig.content }}</strong>
                    </p>
                </div>
            </v-card-text>
            <template v-slot:actions>
                <v-spacer></v-spacer>
                <v-btn color="gray" @click="resetCommonDialog">
                    取消
                </v-btn>
                <v-btn v-if="commonDialogConfig.name == 'save' || commonDialogConfig.name == 'update'" color="green"
                    @click="saveDiyWord">
                    确定
                </v-btn>
                <v-btn v-if="commonDialogConfig.name == 'delete'" color="red"
                    @click="confirmDelete(commonDialogConfig.data)">
                    确认删除
                </v-btn>
            </template>
        </v-card>
    </v-dialog>
</template>

<script>
import { langList } from "@/api/lang.js";
import { adminLabelList } from "@/api/label.js";
import { adminBookList } from "@/api/book.js";
import { getPresetWordListByBookId, removeWordLineFromBook } from '@/api/adminBook';
export default {
    props: {
        //bookId: {},
    },
    data() {
        return {
            tableHeight: 300,
            wordList: [],
            listLoading: false,
            headers: [
                { title: "ID", align: "start", key: "wordId" },
                { title: "单词", align: "start", key: "word" },
                { title: "发音", align: "start", key: "pronunciations" },
                { title: "释意", align: "start", key: "explain" },
                { title: "标签", align: "start", key: "label" },
                { title: "创建日期", align: "start", key: "createAt" },
                { title: "操作", align: "start", key: "actions" },
            ],
            wordBo: {
                bookId: null,
                pageSize: 20,
                pageNum: 1,
                sortOrder: false,
            },
            commonDialogConfig: {
                prependIcon: undefined,
                title: undefined,
                name: undefined,
                visible: false,
                content: undefined,
                width: undefined,
                data: undefined
            },
            langList: [],
            labelList: [],
            langMap: {},
        }
    },
    created() {
        this.tableHeight = window.innerHeight - 64 - 56 - 58;
        this.getSelectData()
    },
    methods: {
        getSelectData() {
            langList({}).then(resp => {
                this.langList = resp.data
                this.langList.forEach(item => {
                    this.langMap[item.langId] = item
                })
            })
            adminLabelList({}).then(resp => {
                this.labelList = resp.data
            })
            adminBookList().then(resp => {
                this.bookList = resp.rows
            })
        },
        manualRefresh(bookId) {
            if (this.wordBo.bookId == bookId) return
            this.wordBo.bookId = bookId
            this.loadItems({ page: 1, itemsPerPage: 20 })
        },
        getPresetWordList() {
            this.listLoading = true
            getPresetWordListByBookId(this.wordBo).then(resp => {
                this.total = resp.total
                this.wordListHandler(resp.rows)
            }).finally(() => this.listLoading = false)
        },
        loadItems({ page, itemsPerPage }) {
            this.wordBo.pageNum = page
            this.wordBo.pageSize = itemsPerPage
            if (this.wordBo.bookId == null) return
            this.getPresetWordList()
        },
        wordListHandler(wordList) {
            this.wordList = []
            if (wordList == null) return
            wordList.forEach(wordItem => {
                this.wordList.push(this.singleWordHandler(wordItem))
            })
        },
        singleWordHandler(wordItem) {
            let singleWord = {}
            singleWord.data = wordItem
            singleWord.wordId = wordItem.wordId
            singleWord.word = wordItem.word
            // if(wordItem.langId!=null&&this.langMap[wordItem.langId]!=null)singleWord.language = this.langMap[wordItem.langId].root
            singleWord.createAt = this.formatTimestamp(wordItem.createAt)
            singleWord.meanSelfExplain = []
            singleWord.meanLocalExplain = []
            return singleWord
        },
        formatTimestamp(timestamp) {
            let date = new Date(timestamp);
            let year = date.getFullYear();
            let month = ('0' + (date.getMonth() + 1)).slice(-2); // 加1是因为getMonth()返回的是0-11
            let day = ('0' + date.getDate()).slice(-2);
            let hour = ('0' + date.getHours()).slice(-2);
            let minute = ('0' + date.getMinutes()).slice(-2);
            let second = ('0' + date.getSeconds()).slice(-2);
            return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        },
        resetCommonDialog() {
            this.commonDialogConfig = {}
        },
        updateWordDialog(word) {
            this.commonDialogConfig.title = "修改单词"
            this.commonDialogConfig.name = 'update'
            this.commonDialogConfig.visible = true
            this.commonDialogConfig.prependIcon = 'mdi-update'
            setTimeout(() => {
                this.$refs.diyWordComponent.keep(word)
            }, 300);
        },
        viewWordDetail(word) {
            this.commonDialogConfig.title = "单词详情"
            this.commonDialogConfig.name = 'word-detail'
            this.commonDialogConfig.visible = true
            this.commonDialogConfig.prependIcon = 'mdi-eye'
            setTimeout(() => {
                this.$refs.adminWordDetailComponent.setWord(word)
            }, 100);
        },
        deleteWordDelete(word) {
            this.commonDialogConfig.title = "从字典中移除单词"
            this.commonDialogConfig.name = 'delete'
            this.commonDialogConfig.visible = true
            this.commonDialogConfig.prependIcon = 'mdi-delete'
            this.commonDialogConfig.content = word.word
            this.commonDialogConfig.data = { wordIdList: word.wordId }
            // this.commonDialogConfig.width=300
        },
        confirmDelete(dataWrapper) {
            removeWordLineFromBook({ id: this.wordBo.bookId, wordIdList: [dataWrapper.wordIdList] }).then(resp => {
                if (resp.code == 1) {
                    this.resetCommonDialog()
                    this.getPresetWordList()
                    this.deleteWordItemSelected = []
                }
            })
        },
        saveDiyWord() {
            this.$refs.diyWordComponent.save(this.commonDialogConfig.name, (result) => {
                if (result) {
                    this.resetCommonDialog()
                    this.getPresetWordList()
                }
            })
        },
    },
}
</script>

<style></style>